<template>
  <h1 v-text="slogan"></h1>
  <h1 v-text="msg"></h1>
  <LhzA @myLove="myLove"></LhzA>
  <hr style="width: 50%">
  <div>
    <h1 v-text="parentData"></h1>
    <button type="button" @click="sendMsg">父组件按钮</button>
    子组件消息 >>> <span v-text="childMsg"></span>
  </div>
  <LhzB :msg="parent" @getChildMsg="getChildMsg"></LhzB>
  父组件表单 >>> <input type="text" v-model="username">
  <LhzC :parent="username" @getSubValue="username=$event"></LhzC>
  <LhzC :parent="username" @getSubValue="subValue"></LhzC>
  <LhzD v-model:parent="username"></LhzD>
  <hr style="width: 50%">
  <div>
    <h1 v-text="parentData"></h1>
    <button type="button" @click="getMsg">父组件获取子组件消息按钮</button>
    子组件消息 >>> <span v-text="childMsg"></span>
  </div>
  <LhzE ref="lhzE"></LhzE>
</template>
<script>
import LhzA from "@/components/chap05/LhzA";
import LhzB from "@/components/chap05/LhzB";
import LhzC from "@/components/chap05/LhzC";
import LhzD from "@/components/chap05/LhzD";
import LhzE from "@/components/chap05/LhzE";

export default {
  name: "HelloLhz",
  data() {
    return {
      slogan: '桃李不言下自成蹊',
      parentData: "父组件数据",
      parentMsg: '父组件消息',
      childMsg: '',
      count: 0,
      username: '',
      param: {
        slogan: '桃李不言下自成蹊',
      }
    }
  },
  props: {
    msg: {
      type: String,
      require: true,
      default: '亲爱的母亲'
    }
  },
  components: {
    LhzA, LhzB, LhzC, LhzD, LhzE
  },
  methods: {
    myLove(content) {
      this.slogan = content;
    },
    sendMsg() {
      this.count++;
    },
    getChildMsg(content) {
      this.childMsg = content;
    },
    subValue(value) {
      this.username = value;
    },
    getMsg() {
      this.childMsg = this.$refs.lhzE.childMsg;
    }
  },
  computed: {
    parent() {
      return this.count > 0 ? this.parentMsg : '';
    }
  }
}
</script>

<style scoped>

</style>